<template>
  <div class="config-value">
    <div v-if="loading" class="loading">
      <el-icon><Loading /></el-icon> 加载中...
    </div>
    <div v-else-if="error" class="error">
      <el-icon><Warning /></el-icon> {{ errorMessage }}
    </div>
    <div v-else>
      <!-- 根据不同类型显示不同的内容 -->
      <template v-if="config && config.type === 'image'">
        <el-image 
          :src="config.value" 
          :style="imageStyle"
          :preview-src-list="[config.value]">
        </el-image>
      </template>
      <template v-else-if="config && config.type === 'boolean'">
        <el-tag :type="config.value ? 'success' : 'info'">
          {{ config.value ? '是' : '否' }}
        </el-tag>
      </template>
      <template v-else-if="config && config.type === 'json'">
        <pre>{{ JSON.stringify(config.value, null, 2) }}</pre>
      </template>
      <template v-else>
        {{ config ? config.value : placeholder }}
      </template>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { getPublicConfigByKey } from '@/api/configs'
import { Loading, Warning } from '@element-plus/icons-vue'

export default {
  name: 'ConfigValue',
  components: {
    Loading,
    Warning
  },
  props: {
    // 配置键名
    configKey: {
      type: String,
      required: true
    },
    // 占位文本，当配置项不存在时显示
    placeholder: {
      type: String,
      default: '暂无数据'
    },
    // 图片样式
    imageWidth: {
      type: String,
      default: '100px'
    },
    imageHeight: {
      type: String,
      default: 'auto'
    }
  },
  setup(props, { emit }) {
    const config = ref(null)
    const loading = ref(false)
    const error = ref(false)
    const errorMessage = ref('')
    
    // 图片样式
    const imageStyle = ref({
      width: props.imageWidth,
      height: props.imageHeight,
      objectFit: 'cover'
    })
    
    /**
     * 加载配置项
     */
    const loadConfig = async () => {
      if (!props.configKey) return
      
      loading.value = true
      error.value = false
      
      try {
        // 使用无需验证的公开配置接口
        const response = await getPublicConfigByKey(props.configKey)
        
        if (response && response.code === 0 && response.data) {
          config.value = response.data
          emit('loaded', response.data)
        } else {
          error.value = true
          errorMessage.value = response.message || `配置项 ${props.configKey} 加载失败`
          emit('error', response.message)
        }
      } catch (err) {
        error.value = true
        errorMessage.value = err.message || `配置项 ${props.configKey} 加载失败`
        emit('error', err.message)
      } finally {
        loading.value = false
      }
    }
    
    // 监听配置键名变化
    watch(() => props.configKey, () => {
      loadConfig()
    })
    
    // 组件挂载时加载配置
    onMounted(() => {
      loadConfig()
    })
    
    return {
      config,
      loading,
      error,
      errorMessage,
      imageStyle
    }
  }
}
</script>

<style scoped>
.config-value {
  display: inline-block;
}

.loading, .error {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.error {
  color: #F56C6C;
}

.loading .el-icon, .error .el-icon {
  margin-right: 6px;
}

pre {
  background-color: #f8f8f8;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  margin: 0;
  max-height: 200px;
  overflow: auto;
}
</style> 